<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);

import "xgplayer/dist/index.min.css";



const online_list1 = ref([
    {
      id: "1",
      title: '革新跨终端的支付交互',
      subTitle: "告别通过手柄、键盘、遥控器等设备输入支付信息的繁琐操作，便捷的交互带动支付转化率的提升。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/mutil-icon-terminal.49e4d8e0.svg'
    },
    { 
      id: "2",
      title: '降低集成成本',
      subTitle: "一次接入扫码签约产品后，未来新增支付方式无需额外集成。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/mutil-icon-cost.696937bd.svg'
    }
 ])

 const pay_list = ref([
    {
      id: "1",
      title: '电子钱包',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*EsWMS5EnjdEAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: "2",
      title: '在线网银',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*l3UtRLZB8zIAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: "3",
      title: '银行卡',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*62f2QLWkrL8AAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: "4",
      title: '柜台支付',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*2FqQQrujwSIAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
    { 
      id: "5",
      title: '国家网关',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*fsElSYqy7HYAAAAAAAAAAAAADmesAQ/fmt.webp'
    },
 ])

 const multiport_list = ref([
    {
      id: "1",
      title: '手机',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-mobile.2787f257.svg'
    },
    { 
      id: "2",
      title: 'PC和平板',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-pc.f325d1fc.svg'
    },
    { 
      id: "3",
      title: '电视',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-tv.758e2233.svg'
    },
 ])

 const integration_list = ref([
 {
      id: "1",
      title: 'API模式',
      subTitle: '100%定制化的收银台方案，收银样式完全由您决定。',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-api.a2491b4d.svg'
    },
    { 
      id: "2",
      title: 'SDK模式',
      subTitle: '在我们提供的收银台模块基础上，灵活调试页面风格，适配您的业务需求。',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/cashier-icon-sdk.38c81779.svg'
    },
 ])
/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};

const playerSrc1 = 'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*LKQCSL2cWmkAAAAAAAAAAAAADmesAQ'
const playerSrc2 = 'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*dmuNR79O1x4AAAAAAAAAAAAADmesAQ'
const card_btns = ref(['电子钱包', '银行卡'])
const activeIndex = ref(0)
let player1 = ref({})
let player2 = ref({})
const cardClick = (type: number) => {
    if(type == 0) {
        player1.value.replay()
    } else {
        player2.value.replay()
    }
    activeIndex.value = type
}


onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

  player1.value = new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: true, //自动播放
    screenShot: false, // 开启截图功能
    loop: true,
    fullscreen: true,
    //视频地址
    url: playerSrc1,

    //封面图
    poster:
        playerSrc1,
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
  player2.value = new Player({
    id: "mse2", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: true, //自动播放
    screenShot: false, // 开启截图功能
    loop: true,
    fullscreen: true,
    //视频地址
    url: playerSrc2,

    //封面图
    poster:
        playerSrc2,
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*F71lQ49J7uIAAAAAAAAAAAAADmesAQ/original&quot',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*kPU3Tq1_1_4AAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

</script>

<template>
  <v-app>
    <!-- 主图-->
    <banner-main
      :lists="carousel_Images"
      :lists_bottom="online_list1"
      title="扫码签约" 
      subTitle="我们重塑跨屏支付体验，顾客用手机扫描终端大屏上的二维码，即可在手机上完成付款方式的绑定，付款流程快至6秒。"
     ></banner-main>

    <div class="w-full text-center pt-40 ">
        <div class="mx-auto w-9/12 d-flex flex-column justify-center align-center">
          <span class="font-semibold text-3xl mb-10">支持电子钱包和银行卡的极速绑定</span>
        </div>

        <ul class="d-flex justify-center align-center rounded-[40px] overflow-hidden text-center text-2xl w-max mx-auto text-#546680 bg-[#f9fafb] mb-10">
            <li 
                class="px-28 py-4 cursor-pointer mr-[-20px]"
                :class="{'activeClass': activeIndex == index}"
                v-for="(item, index) in card_btns" 
                :key="index"
                @click="cardClick(index)">
                {{ item }}
            </li>
        </ul>
        <div class="mx-auto w-9/12">
            <div id="mse" v-show="activeIndex == 0"></div>
            <div id="mse2" v-show="activeIndex == 1"></div>
        </div>
    </div>
    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    .activeClass {
        @apply bg-[#1677ff] font-bold text-white rounded-[40px]
    }

    :deep(.xgplayer-controls.controls-autohide) {
        display: none;
    }
    :deep(video) {
        width: 100%;
        height: 100%;
        object-fit: fill; /* 或者使用 contain，根据需求选择 */
    }
</style>